<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../static/layui/css/layui.css" media="all">

    <script src="../static/layui/layui.all.js" charset="utf-8"></script>
    <script src="../static/layui/layui.js" charset="utf-8"></script>

    <title>首页-index</title>

</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">layui 后台布局</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="#">控制台</a></li>
            <li class="layui-nav-item"><a href="">Test2</a></li>
            <li class="layui-nav-item"><a href="">Test3</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/Eq9lxrM" class="layui-nav-img">
                    古天乐
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退出</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">所有商品</a>
                    <dl class="layui-nav-child">
                        <dd><a _href="./table;">TAB1</a></dd>
                        <dd><a href="#" id="TAB2" class="site-demo-active layui-icon layui-icon-face-smile" data-type="tabAdd" url-type="urlType" title="titileTab2" >TAB2</a></dd>
                        <dd><a href="javascript:;" id="TAB3"  class="site-demo-active"   data-type="tabDelete" >TAB3</a></dd>
                        <dd><a href="javascript:;" id="TAB4" class="site-demo-active" data-type="shopAdd" >TAB4</a></dd>
                        <dd><a href="/table">超链接</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">解决方案</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">列表一</a></dd>
                        <dd><a href="javascript:;">列表二</a></dd>
                        <dd><a href="/table">超链接</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">云市场</a></li>
                <li class="layui-nav-item"><a href="">发布商品</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->

        <!--动态TAB区-->
        <div class="layui-tab" lay-filter="demo11" lay-allowclose="true">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="11">网站设置</li>
                <li lay-id="22">用户管理</li>
                <li lay-id="33">权限分配</li>
                <li lay-id="44">商品管理</li>
                <li lay-id="55">订单管理</li>
            </ul>

            <div class="layui-tab-content" >

                <div class="layui-tab-item layui-show">

                    <table class="layui-table" lay-filter="demo">
                        <thead>
                        <tr>
                            <th lay-data="{field:'id', sort:true, align: 'center',width:60}">ID</th>
                            <th lay-data="{field:'name', align: 'center',width:100}">用户名</th>
                            <th lay-data="{field:'age',align: 'center', width:100 ,sort:true}">年龄</th>
                            <th lay-data="{field:'sign'}">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="user:${userList}">
                            <td th:text="${user.id}"></td>
                            <td th:text="${user.name}"></td>
                            <td th:text="${user.age}"></td>


                            <td class="layui-my-right">
                                <a th:href="@{/eidtGoodsAll(id=${user.id})}">
                                    <button class="layui-btn layui-btn-normal">修改</button>
                                </a>
                                <a th:href="@{/deletete(id=${user.id})}">
                                    <button class="layui-btn layui-btn-warm">删除</button>
                                </a>
                                <a th:href="@{/allGoods(id=${user.id})}">
                                    <button class="layui-btn layui-btn-danger">明细</button>
                                </a>
                            </td>
                        </tr>

                        </tbody>

                    </table>
                    <div id="test1"></div>
                </div>
                <div class="layui-tab-item"  style="height: 800px">
                    <iframe src="./table"></iframe>
                </div>
                <div class="layui-tab-item">内容3
                    <iframe src="./table"></iframe>
                </div>
                <div class="layui-tab-item">内容4</div>
                <div class="layui-tab-item">内容5</div>
            </div>
        </div>


    </div>


    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>

<script>
    layui.use('element', function(){
        var $ = layui.jquery
            ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

        //触发事件
        var active = {

            tabAdd: function(){
                //新增一个Tab项
                element.tabAdd('demo11', {
                    title: '新选项' //用于演示
                    ,content: '<iframe data-frameid="' + 'ID' + '" frameborder="0" name="content"  style="height: 800px ; width:100% "  src="' + './table' + '"></iframe>'
                    ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                })
            }

            ,tabChange: function(){
                //切换到指定Tab项
                element.tabChange('demo', '22'); //切换到：用户管理
            }
            
            ,shopAdd:function () {
                alert(this);
           }
        };

        //右侧栏
        $('.site-demo-active').on('click', function(){
            var othis = $(this), type = othis.data('type');


           // active[type] ? active[type].call(this, othis) : '';

            //  自定义测试

            var url = $(this).children('a').attr('_href');

           // var urlytpe= othis.type('url');

            var  id  = othis.attr('id');

            alert(id);

            var  t  =   othis.data('title');


            var title = $(this).find('cite').html();

            alert(othis.attr('title'));

            var title = othis.text();

            changeTab.tabAdd(element,title,id);
            changeTab.tabChange(element,id);
    });

        var changeTab  = {
            tabAdd: function(element,title,id){
                //新增一个Tab项
                element.tabAdd('demo11', {
                    title: title //用于演示
                    ,content: '<iframe data-frameid="' + 'ID' + '" frameborder="0" name="content"  style="height: 800px ; width:100% "  src="' + './table' + '"></iframe>'
                    ,id: id
                })
            }

            ,tabChange: function(el,id){
                element.tabChange('demo11', id);
             }

        };


    });
</script>

<script>
    //JavaScript代码区域
    // layui.use('table', function () {   单个变量   多变量得用上[],代表多个
    layui.use(['element', 'table'], function () {
        // var element = layui.element;
        var $ = layui.jquery
            , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

        //转换静态表格
        var table = layui.table;
        table.init('demo', {
            height: 500 //设置高度
            , limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
            //支持所有基础参数
        });
    });

    layui.use('laypage', function () {
        var laypage = layui.laypage;
        //执行一个laypage实例
        laypage.render({
            elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
            , count: 40 //数据总数，从服务端得到
            , limit: 10
            // ,groups:
            , jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如：
                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                console.log(obj.limit); //得到每页显示的条数

                //首次不执行
                if (!first) {
                    //do something
                }
            }
        });

    });
</script>


</body>
</html>